<template>
  <div class="ownerBox">
    <div class="">
      <div class="tableInfo">
        <base-button
          class="importantButton"
          @click="handleAdd"
        >分配库位</base-button>
        <base-button
          class="unimportanceButton"
          @click="batchCancel(cancelData)"
        >取消分配</base-button>
      </div>
      <!-- 表格数据 -->
      <div v-if="listData.length>0">
        <el-table
          ref="table"
          :data="listData"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            align="center"
            width="65"
          />
          <el-table-column
            type="index"
            align="center"
            label="序号"
            width="68"
          />
          <el-table-column
            prop="warehouseName"
            align="center"
            label="仓库名称"
          />
          <el-table-column
            prop="areaName"
            align="center"
            label="库区名称"
          />
          <el-table-column
            prop="locationCode"
            align="center"
            label="库位编号"
          />
          <el-table-column
            prop="locationName"
            align="center"
            label="库位名称"
          />
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
          >
            <template slot-scope="{ row }">
              <base-button
                class="fontOperateButton"
                @click="handleCancel(row)"
              >取消分配</base-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <base-pagination
          :total="total"
          :limit="pages.size"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></base-pagination>
        <!-- end -->
      </div>
      <div
        v-else
        class="emptyTip"
      >
        <span class="imgIcon"></span>
        <p>暂无库位</p>
      </div>
    </div>
    <dialog-base
      :dialogData="dialogData"
      :listData="listData"
      @getlist="getList"
      :ownerId="ownerId"
    ></dialog-base>
    <!-- end -->
    <!-- 取消分配 -->
    <dialog-cancel
      :dialogData="dialogData"
      @cancel="cancelButton"
      @batchcancel="batchCancel"
      @clearselection="clearSelection"
      @getlist="getList"
    ></dialog-cancel>
    <!-- end -->
  </div>
</template>
<script lang="ts">
import { Component, Prop } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
// 关闭窗口
import SinglePage from '@/mixin/single-page'
// 公用组件
// 按钮
import BaseButton from '@/components/base-button/index.vue'
// 本模块组件
import DialogBase from './components/index.vue'
import DialogCancel from './components/cancel.vue'
// 分页
import BasePagination from '@/components/base-pagination/index.vue'
// interface接口
import { ICommonReturn } from '@/utils/common-interface'
import { IOwnerTableData } from '@/module-business/interface/owner'
// api数据接口
import {
  getOwnerLocationList,
  deleteOwnerLocation
} from '@/module-business/api/owner'
@Component({
  name: 'locationAdd',
  components: {
    BaseButton,
    BasePagination,
    DialogBase,
    DialogCancel
  }
})
export default class extends mixins(SinglePage) {
  @Prop() private ownerId!: any
  private listData: IOwnerTableData[] = [] // 数据列表
  private total = 0
  private loading = false
  private cancelData = []
  private el: any = this.$refs
  private dialogData = {
    id: '',
    msg: '',
    dialogTitle: '',
    visible: false,
    isVisibleCancel: false
  }

  private pages = {
    current: 1, // 当前页码
    size: 10 // 每页数据量
  }

  created() {
    this.initData()
  }

  // 功能
  // 获取select数据
  private async initData() {
    this.getList()
  }

  // 获取数据
  async getList() {
    const params = {
      ...this.pages,
      ownerId: this.ownerId
    }
    const { data } = await getOwnerLocationList(params)
    if (data) {
      this.loading = false
      this.listData = data.records
      this.total = parseInt(data.total, 10)
    }
  }

  private async cancelButton() {
    const ids: any[] = []
    this.cancelData.forEach((value: any) => {
      ids.push(value.id)
    })
    const data = ((await deleteOwnerLocation({
      ids: ids
    })) as unknown) as ICommonReturn
    if (data.code === 0) {
      this.getList()
      this.$message.success('操作成功')
    } else {
      this.$message.error(data.msg)
    }
    this.dialogData.isVisibleCancel = false
  }

  // 提交数据
  private async btnSave() {
    this.closeWindow()
  }

  // ui
  // 获取取消的数据
  handleSelectionChange(value: any) {
    this.cancelData = value
  }

  // 单个取消
  // TODO可以取消，库位下有货品等业务数据不允许取消
  private handleCancel(row: any) {
    this.el.table.toggleRowSelection(row, true)
    this.dialogData.isVisibleCancel = true
    this.dialogData.msg = `确认取消货主的库位：${row.locationName} 吗？`
    // this.dialogData.id = row.id
    this.dialogData.dialogTitle = '取消分配确认'
  }

  // 批量取消分配
  batchCancel() {
    if (this.cancelData.length > 0) {
      this.dialogData.isVisibleCancel = true
      this.dialogData.msg = '确定要取消分配吗？'
      this.dialogData.dialogTitle = '取消分配确认'
    } else {
      this.$message({
        message: '请选择要取消的数据',
        type: 'warning'
      })
      return false
    }
  }

  clearSelection() {
    this.el.table.clearSelection()
  }

  // 添加货主
  private handleAdd() {
    this.dialogData.visible = true
  }

  // 当前页
  private handleCurrentChange(page: number) {
    this.pages.current = page
    this.getList()
  }

  // 每页条数
  private handleSizeChange(page: number) {
    this.pages.size = page
    this.pages.current = 1
    this.getList()
  }

  // 返回
  btnReturn() {
    this.closeWindow()
  }
}
</script>

<style lang="scss" scoped>
</style>
<style lang="scss">
</style>
